<%
layout("tabbar.html", {index: 0}){
%>
<script>
    $(document).ready(function(){
        var $searchBar = $('#searchBar'),
            $searchText = $('#searchText'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchCancel = $('#searchCancel');
        function cancelSearch(){
            $searchInput.val('');
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }
        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
            .on('blur', function () {
                if(! this.value.length) cancelSearch();
            })
            .on('input', function(){
                if(this.value.length) {
                    console.log(this.value)
                } else {
//                    $searchResult.hide();
                }
            });
        $searchClear.on('click', function(){
            $searchInput.val('');
            $searchInput.focus();
        });

        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
    });
</script>
<!--<div class="weui-search-bar" id="searchBar">-->
    <!--<form class="weui-search-bar__form">-->
        <!--<div class="weui-search-bar__box">-->
            <!--<i class="weui-icon-search"></i>-->
            <!--<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required/>-->
            <!--<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>-->
        <!--</div>-->
        <!--<label class="weui-search-bar__label" id="searchText">-->
            <!--<i class="weui-icon-search"></i>-->
            <!--<span>搜索</span>-->
        <!--</label>-->
    <!--</form>-->
    <!--<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>-->
<!--</div>-->
<div class="weui-cells__title">
    油卡列表
    <a id="addButton" href="${ctxPath}/addOilCard" style="font-size: 20px; float: right; color: #999;">+</a>
</div>
<div class="weui-cells" id="oilCardList" style="margin-top: 10px;">
    <% for (oilCard in oilCards) { %>
    <a class="weui-cell weui-cell_access oilCardItem" href="${ctxPath}/oilCard/${oilCard.id}">
        <div class="weui-cell__bd">
            ${oilCard.number}
        </div>
        <div class="weui-cell__ft">
            ${oilCard.username}
        </div>
    </a>
    <% } %>
</div>
<div class="js_dialog" id="dialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">余额即将不足</strong></div>
        <div class="weui-dialog__bd" id="rechargeText">您最少需充值${money / 100}元</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="confirmButton">确定</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="cancelDialog">取消</a>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
       if (${show}) {
           $('#dialog').fadeIn(200);
           $('#confirmButton').click(function () {
               $('#dialog').fadeOut(200);
               window.location.href = '${ctxPath}/recharge';
           });
           $('#cancelDialog').click(function () {
               $('#dialog').fadeOut(200);
           });
       }
    });
</script>
<% } %>